<div class="report">
    <div class="reportHeader">
    	<div class="report-nav">
    		<div class="reportType selected" id="reportTable">巡检情况</div>
	    	<div class="reportType" id="reportCharts">维修情况</div>
	    	<!-- <div class="reportType">图形统计</div> -->
    	</div>
    	<div class="report-search" style="position: relative;">
            <div class="treeBox"><ul id="treeDemo" class="ztree form-control"></ul></div>
    		<input class="search-area" id="reportArea" type="button" value="按管辖区域">
    		<input class="search-date" id='reportDate' type="button" value="按日期">
    		<button class="buttonBlue" id='reportSearchButton'>查询</button>
            <img id="areaClear" src="img/common/close.png" style="position: absolute;display: none;cursor: pointer;top: calc(50% - .06rem);left: 1.6rem;">
            <form  action="" id="forms" enctype="multipart/form-data" style="display:none">
                <input type="text" id="areaIdForm" name='areaId'>
                <input type="text" id="areaTypeForm" name='areaType'>
                <input type="text" id="timeForm" name='time'>
                <input type="text" id="areaNameForm" name='areaName'>
            </form>
    	</div>
    </div>
    <div class="reportBody">
        <div class="report-table-contant">
            <div class="report-table-title">
                <span><span id="reportYear">2018</span>年<span id="reportMonth">11</span>月南京市栖霞区<span id="selectArea"></span>健身工程点月报表</span>
                <img src="img/report/38F769CB-E2E6-4458-AFE3-BD11E718627F@3x.png" id="exportReport" style="width:20px;height: 20px;margin-left: 5px;margin-top: 4px;cursor: pointer;" title="导出exel表格">
            </div>
            <div class="gridContent" id="gridContent">
                <div id="gridRepairTable" lay-filter="examineTable"></div>
            </div>
        </div>
    </div>
    <div class="report-repair-charts">
        <div class="leftCharts">
            <div class="repairCharts">
                <div class="chartsHead">
                    <div class="title">
                        <div class="line"></div>
                        <p class="name">当月故障维修情况</p>
                    </div>
                </div>
                <div class="chartsBody">
                    <div class="repairChartsBody repairImportant">
                        <div class="repairChartsTitle">
                            <div class="chartsTitleItem">
                                <div class="colorsLine" style="background: #548CFF"></div>
                                <p>一般维修<span id="commonNum">0</span>个</p>
                            </div>
                            <div class="chartsTitleItem">
                                <div class="colorsLine" style="background: #FFC525"></div>
                                <p>紧急维修<span id="impNum">0</span>个</p>
                            </div>
                        </div>
                        <div class="repairImpBody" id="repairImpBody"></div>
                    </div>
                    <div class="repairChartsBody repairIntime">
                        <div class="repairChartsTitle">
                            <div class="chartsTitleItem">
                                <div class="colorsLine" style="background: #4BBAFF"></div>
                                <p>正常维修<span id="comRepairNum">0</span>个</p>
                            </div>
                            <div class="chartsTitleItem">
                                <div class="colorsLine" style="background: #31E4AA"></div>
                                <p>超时维修<span id="otRepairNum">0</span>个</p>
                            </div>
                        </div>
                        <div class="repairIntimeBody" id="repairIntimeBody"></div>
                    </div>
                </div>
            </div>
            <div class="userCharts">
                <div class="chartsHead">
                    <div class="title">
                        <div class="line"></div>
                        <p class="name">当月维修上报来源情况</p>
                    </div>
                </div>
                <div class="chartsBody">
                    <div class="userChartsNum">
                        <div class="chartsTitleItem">
                            <div class="colorsLine" style="background: #4BBAFF"></div>
                            <p>巡检人员<span id="xjReportNum">0</span>个</p>
                        </div>
                        <div class="chartsTitleItem">
                            <div class="colorsLine" style="background: #548CFF;margin:.15rem .21rem .15rem 0"></div>
                            <p>游客<span id="guestReportNum">0</span>个</p>
                        </div>
                        <div class="chartsTitleItem">
                            <div class="colorsLine" style="background: #FFC525"></div>
                            <p>工作人员<span id="sqReportNum">0</span>个</p>
                        </div>
                    </div>
                    <div class="userChartsBody" id="userChartsBody"></div>
                </div>
            </div>
        </div>
        <div class="rightCharts">
            <div class="chartsHead">
                <div class="title">
                    <div class="line"></div>
                    <p class="name">维修情况<span style="font-size: 0.1rem;margin-left: 5px;">单位：个</span></p>
                </div>
            </div>
            <div class="chartsBody" id="areaCountCharts" style="top: .5rem;padding: 0">
                
            </div>
        </div>
    </div>
</div>